import { ProFormDependency, ProFormSelect, ProFormText } from '@ant-design/pro-components';
import  {
  ModalForm,
  ProFormGroup,
  ProFormInstance,
  ProFormSwitch,
  ProFormTextArea,
} from '@ant-design/pro-form';
import { Col, Row } from 'antd';
import React, { useRef } from 'react';
import * as c from '@/services/consts';
import { useModel } from 'umi';

type FormProps = {
  visible: boolean;
  onCancel: () => void;
  onSubmit: (record:API.VpnServerCdn) => void;
};

const Form: React.FC<FormProps> = (props) => {
  const { visible, onCancel, onSubmit } = props;
  if (!visible) {
    return <></>;
  }

  // const actionRef = useRef<ActionType>();
  const formRef = useRef<ProFormInstance>();
  
  const { getCdnAccountOptions, getCdnDomainOptions, cdnDomains } = useModel(
    'useGlobalModel',
    (model) => ({
      getCdnDomainOptions: model.getCdnDomainOptions,
      getCdnAccountOptions: model.getCdnAccountOptions,
      cdnDomains: model.cdnDomains,
    }),
  );

  const handleFormSubmit = async (record:API.VpnServerCdn) => {
    record.id = Date.now().toString();

    // console.log(record);
    // return;
    for(let d of cdnDomains){
      if(d.id == record.domainId){
        record.name = `${record.name}.${d.name}`;
        break;
      }
    }

    onSubmit(record);
  };

  return (
    <ModalForm<API.VpnServerCdn>
      width={600}
      open={visible}
      title="新建CDN域名"
      onFinish={handleFormSubmit}
      modalProps={{
        onCancel: onCancel,
        //destroyOnClose: false,
        maskClosable: false,
      }}
        formRef={formRef}
    >
      <Row gutter={24} style={{marginTop:30}}>
        <Col span={24}>
          <ProFormSelect
            name="type"
            label="CDN提供商"
            allowClear={true}
            options={c.CdnSupplierTypeOptions}
            rules={[{ required: true, message: '请选择提供商' }]}
            initialValue={c.CdnSupplierType.Cloudflare.value}
            // fieldProps={{
            //   onChange(value, option) {
            //     // console.log(value, option);
            //     formRef?.current?.setFieldValue('refChannelIds', undefined);
            //   },
            // }}
          />
        </Col>
        <ProFormDependency name={['type']}>
          {({ type }) => {
            if (type) {
              console.log(type);
              return (
        <Col span={24}>
          <ProFormSelect
            name="accountId"
            label="CDN帐号"
            allowClear={true}
            options={getCdnAccountOptions(type)}
            placeholder='请选择CDN帐号'
            rules={[{ required: true, message: '请选择CDN帐号' }]}
            showSearch={true}
          />
        </Col>
              );
            }
            return null;
          }}
        </ProFormDependency>

        <ProFormDependency name={['accountId']}>
          {({ accountId }) => {
            if (accountId) {
              console.log(accountId);
              return (
        <Col span={24}>
          <ProFormSelect
            name="domainId"
            label="域名"
            allowClear={true}
            placeholder='请选择CDN提供商'
            options={getCdnDomainOptions(accountId)}
            rules={[{ required: true, message: '请选择域名' }]}
            showSearch={true}
          />
        </Col>
              );
            }
            return null;
          }}
        </ProFormDependency>

        <Col span={24}>
          <ProFormText
            name="name"
            label="名称"
            allowClear={true}
            rules={[{ required: true, message: '请输入名称' }]}
          />
        </Col>
      </Row>
    </ModalForm>
  );
};

export default Form;
